<template>
	<view id="achievement">
		<view class="u-navbar">
			<view class="u-back-icon" @tap="goBack"><my-icon name="back" size="28upx" style="color: #fff;"></my-icon></view>
			<view class="u-navbar-content-title">
				<view class="u-title u-line-1">
					每日一练
					<text class="navRight" @click="historyClick">历史记录</text>
				</view>
			</view>
		</view>
		<!-- <u-navbar :border-bottom="false" title="每日一练" title-color="#fff" back-icon-color="#fff"></u-navbar> -->
		<view class="info">
			<image v-if="signInfo.avatar" :src="signInfo.avatar"></image>
			<image v-else src="../../static/user/avatar.png"></image>
			<view class="title">
				<text>{{ signInfo.userName }}</text>
				<view>
					您已连续打卡
					<text>{{ signInfo.continueDays }}</text>
					天
				</view>
			</view>
		</view>
		<view class="topic-info">
			<view>
				<text class="right">{{ signInfo.totalDays }}</text>
				<text>累计打卡</text>
			</view>
			<view>
				<text class="wrong">{{ signInfo.queCou }}</text>
				<text>已答题</text>
			</view>
			<view>
				<text class="undo">{{ signInfo.rightRate }}</text>
				<view class="undoTxt">
					正确率
					<text style="color: #A1A2A6;">(%)</text>
				</view>
			</view>
		</view>
		<view class="taskBot">
			<view class="header">
				<view :class="[tabIndex == 0 ? 'activeTab' : '']" @click="tabClick(0)">
					<text>系统任务</text>
					<text class="iconTab"></text>
				</view>
				<view :class="[tabIndex == 1 ? 'activeTab' : '']" @click="tabClick(1)">
					<text>老师任务</text>
					<text class="iconTab"></text>
				</view>
				<!-- <button type="default" @click="correctTopicHandler" class="wrongBtn" v-if="correctTopic">纠错</button> -->
			</view>
			<view class="taskinfo">
				<template v-if="tabIndex == 0">
					<!-- 系统任务 -->
					<template v-if="sysInfo.status == 1 || sysInfo.status == 2">
						<view class="taskinfoTit" style="margin-top: 120upx;">
							<view>{{ sysInfo.taskType == 1 ? sysInfo.paperName : sysInfo.subName }}</view>
						</view>
						<view class="taskinfoButton">
							<!-- 							<view>
								已有
								<text>{{ sysInfo.clockUsers ? sysInfo.clockUsers : 0 }}</text>
								人打卡
							</view> -->
							<u-button @click="handlestartAnswer(sysInfo)" class="button" shape="circle" :ripple="true">
								{{ sysInfo.status == 1 ? '去打卡' : sysInfo.status == 2 ? '进行中' : '已打卡' }}
							</u-button>
						</view>
					</template>

					<view class="teaNone" v-if="sysInfo.status != 1 && sysInfo.status != 2">
						<view>
							<image src="../../static/user/taskNone.png"></image>
							<text>你真棒！任务都已做完啦~</text>
						</view>
					</view>
					<view class="teaNone" v-if="!sysInfo">
						<view>
							<image src="../../static/user/priceNone.png"></image>
							<text>暂无任务哟~</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="teaNone" v-if="teaInfoList == null">
						<view>
							<image src="../../static/user/priceNone.png"></image>
							<text>暂无任务哟~</text>
						</view>
					</view>
					<swiper v-if="teaInfo.length>0" :duration="switchDuration" :disable-touch="jumping" indicator-dots="true" circular="true">
							<swiper-item v-for="(topic, index) in teaInfo" :key="index">
								<view class="swiper-item pb-30">
									<!-- 系统任务 -->
									<view class="taskinfoTit">
										<view>{{ topic.taskType == 1 ? topic.paperName : topic.subName }}</view>
										<text>{{ topic.taskType == 2 ? topic.chapterName : '' }}</text>
									</view>
									<view class="taskinfoButton">
				<!-- 						<view>
											已有
											<text>{{ topic.clockUsers ? topic.clockUsers : 0 }}</text>
											人打卡
										</view> -->
										<u-button @click="handlestartAnswer(topic)" class="button" shape="circle" :ripple="true">
											{{ topic.status == 1 ? '去打卡' : topic.status == 2 ? '进行中' : '已打卡' }}
										</u-button>
									</view>
								</view>
							</swiper-item>
					</swiper>
					<view class="teaNone" v-if="teaInfo.length == 0 && teaInfoList != null">
						<view>
							<image src="../../static/user/taskNone.png"></image>
							<text>你真棒！任务都已做完啦~</text>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';
export default {
	mixins: [exam],
	data() {
		return {
			signInfo: {}, //打卡信息
			linkType: 0, //页面进入类型
			tabIndex: 0, //0系统 1 老师任务
			sysInfo: {}, //系统任务
			teaInfo: [], //教师任务
			switchDuration: 200,
			jumping: false //是否再跳转中
		};
	},
	onLoad(option) {
		this.linkType = option.type ? option.type : 0;
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			return this.getSign();
		},
		tabClick(type) {
			this.tabIndex = type;
		},
		historyClick() {
			uni.navigateTo({
				url: './History'
			});
		},
		//获取打卡信息
		getSign() {
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/mine/getUserClockDetail')
					.then(res => {
						this.signInfo = res;
						this.sysInfo = res.sysTask;
						this.teaInfoList = res.teaTask.length > 0 ? res.teaTask : null;
						this.teaInfo = [];
						if (res.teaTask.length > 0) {
							for (let i = 0; i < res.teaTask.length; i++) {
								if (res.teaTask[i].status == 1 || res.teaTask[i].status == 2) {
									this.teaInfo.push(res.teaTask[i]);
								}
							}
						}
						resolve();
					})
					.catch(reject);
			});
		},
		// 返回
		goBack() {
			if (this.linkType == 1) {
				//首页打卡进入
				uni.switchTab({
					url: '../user/user'
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		handlestartAnswer(data) {
			const paperid = data.paperId;
			const apiSetting = { isClock: 1, paperid, isSign: true,duration:data.duration };
			let upid = data.upId;
			let achievementPageReload = true;
			let achievementPageReexamHander = null;
			if (data.status == 3) {
				this.signResult({ upid, status: 2 }, achievementPageReexamHander, achievementPageReload, 'navigateTo');
			} else {
				this.startMoni(apiSetting);
			}
		}
	}
};
</script>
<style>
page {
	background: #fafafa;
}
</style>
<style lang="scss">
.navRight {
	position: absolute;
	right: 30upx;
	font-size: 30upx;
	z-index: 11;
}
.teaNone {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	view {
		text-align: center;
	}
	image {
		width: 200upx;
		height: 192upx;
		margin-bottom: 30upx;
	}
	text {
		display: block;
		width: 100%;
		flex: 1;
		color: #636874;
		font-size: 28upx;
	}
}
#achievement {
	width: 100%;
	height: 100%;
	background: url(../../static/daily/dailyBg.png) no-repeat;
	background-size: 100% auto;
	.u-title {
		color: #fff;
		text-align: center;
		font-size: 32upx;
	}
	.u-navbar {
		background: none !important;
		height: 44px;
		line-height: 44px;
		padding-top: 60upx;
	}
	.u-back-icon {
		position: absolute;
		padding: 0 30upx;
	}
	.info {
		display: flex;
		align-items: center;
		color: #ffffff;
		padding-top: 80upx;
		width: 690upx;
		margin: 0 auto;
		image {
			width: 92upx;
			height: 92upx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 25upx;
		}
		.title {
			flex: 1;
			font-weight: 500;
			text {
				font-size: 34upx;
				font-weight: 400;
			}
			view {
				font-size: 28upx;
				text {
					font-size: 34upx;
					font-weight: 600;
					color: #ec412f;
					margin: 0 5upx;
				}
			}
		}
		.detail {
			.text {
				width: 100%;
				font-size: 28upx;
				font-weight: 400;
				flex-direction: initial;
				line-height: 40upx;
				text {
					font-weight: bold;
					font-size: 32upx;
					margin-right: 6upx;
				}
			}
		}
	}
	.topic-info {
		height: 200upx;
		width: 690upx;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 30upx;
		margin-top: 40upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		text-align: center;
		view {
			display: flex;
			flex-direction: column;
			text:first-child {
				font-size: 48upx;
				font-weight: bold;
			}
			text {
				font-size: 30upx;
				font-weight: 400;
				color: #363940;
			}

			.wrong {
				color: #3691fd;
			}
			.right {
				color: #5fba4a;
			}
			.undo {
				color: #ffb11d;
			}
		}
	}
}
uni-swiper {
	height: 100%;
	/deep/.uni-swiper-dot-active {
		border-radius: 8upx;
		width: 40upx!important;
		background: #f45c4b !important;
	}
	/deep/.uni-swiper-dot {
		width: 10upx;
		height: 10upx;
		background: rgba(244, 92, 75, 0.4);
	}
}
.undoTxt {
	flex-direction: initial !important;
	justify-content: center;
	text {
		font-size: 26upx !important;
		color: #a1a2a6 !important;
		font-weight: normal !important;
	}
}
.button {
	width: 350upx;
	height: 76upx;
	font-size: 32upx;
	background: $linear-bg;
	color: #ffffff !important;
}
.button::after {
	border: none !important;
}
.taskBot {
	width: 690upx;
	margin: 0 auto;
	margin-top: 60upx !important;
	.taskinfo {
		height: 438upx;
		width: 100%;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 30upx;
		margin-top: 40upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
		padding-top: 1upx;
		position: relative;
		.taskinfoTit {
			width: 80%;
			// height: 87upx;
			margin: 69upx auto 0;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
			flex-direction: column;
			view {
				font-size: 34upx;
				color: #363940;
				font-weight: bold;
				// margin-bottom: 9upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
			}
			text {
				margin-top: 55upx;
				font-size: 34upx;
				color: #636874;
				display: block;
				width: 100%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.taskinfoButton {
			text-align: center;
			color: #8d94a6;
			font-size: 28upx;
			position: absolute;
			bottom: 0;
			padding-bottom: 35px;
			width: 100%;
			view {
				margin-bottom: 24upx;
				text {
					font-size: 30upx;
					font-weight: 500;
					color: #3691fd;
				}
			}
		}
	}
}
.activeTab {
	font-size: 34upx !important;
	color: #363940 !important;
}
.activeTab .iconTab {
	display: block !important;
}
.header {
	display: flex;
	align-items: center;
	margin-bottom: 24upx;
	padding-left: 25upx;
	view {
		padding-right: 38upx;
		font-size: 28upx;
		font-weight: 600;
		color: #636874;
		position: relative;
		text {
			z-index: 2;
			position: relative;
			left: 0;
		}
		.iconTab {
			display: none;
			width: 130upx;
			height: 10upx;
			background: linear-gradient(to right, #ec412f, #fc7767, rgba(0, 0, 0, 0));
			border-radius: 4upx;
			position: absolute;
			left: 0;
			bottom: 0;
			margin: auto;
			z-index: 1;
		}
	}
}
</style>
